<template>
  <el-table row-key="id" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55"
    />
    <el-table-column
      v-for="(item, index) in colList"
      :key="index"
      align="center"
      :prop="dropCol[index].prop"
      :label="item.label"
      :width="item.width || width"
      :class-name="item.cName"
      show-overflow-tooltip
    >
      <template v-if="item.name">
        <slot :name="item.slot" />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="230" align="center" fixed="right">
      <template slot-scope="scope">
        <el-button v-permission="['SERVICEMONITOR_STARTSTOP_BUTTON']" type="text" @click="$emit('changeType',scope.row)">{{ scope.row.taskStatus === '1' ? '停止' : '启用' }}</el-button>
        <el-button v-permission="['SERVICEMONITOR_SHOW_BUTTON']" type="text" @click="$emit('showMonitorLog',scope.row)"> 连接详情 </el-button>
        <el-button v-permission="['SERVICEMONITOR_UPDATE_BUTTON']" type="text" @click="$emit('handleUpdate',scope.row)"> 修改 </el-button>
        <el-button v-permission="['SERVICEMONITOR_DEL_BUTTON']" type="text" class="text-del-btn" @click="$emit('handleDelete',scope.row)"> 删除 </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: 'EDTable',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    colList: {
      type: Array,
      default: () => []
    },
    dropCol: {
      type: Array,
      default: () => []
    },
    width: {
      type: Number,
      default: null
    }
  },
  methods: {
    handleSelectionChange(row) {
      this.$emit('multipleSelectionChange', row)
    }
  }
}
</script>
